<template>
  <van-button
    loading-size="20px"
    :loading="collectedLoading"
    :icon="is_collected ? 'star' : 'star-o'"
    :class="{ goodAttitude: is_collected }"
    @click="judgeDoCOllect"
  />
</template>

<script>
import { collectArticle, cancelCollectArticle } from '@/api/article/article.js'
export default {
  name: '',
  data() {
    return {
      collectedLoading: false
    }
  },
  created() {},
  props: {
    articleDetail: {
      type: Object,
      required: true
    }
  },
  methods: {
    async collected() {
      this.collectedLoading = true
      try {
        const articleID = this.articleDetail.art_id
        await collectArticle(articleID)
        this.articleDetail.is_collected = true
        this.$toast.success('收藏成功')
      } catch (error) {
        this.$toast.fail('收藏失败，稍后再试')
      }
      this.collectedLoading = false
    },
    async cancelCollected() {
      this.collectedLoading = true
      try {
        const articleID = this.articleDetail.art_id
        await cancelCollectArticle(articleID)
        this.articleDetail.is_collected = false
        this.$toast.success('取消成功')
      } catch (error) {
        this.$toast.fail('取消失败，稍后再试')
      }
      this.collectedLoading = false
    },
    judgeDoCOllect() {
      // 收藏点击取消，未收藏点击收藏
      this.is_collected ? this.cancelCollected() : this.collected()
    }
  },
  computed: {
    is_collected() {
      return this.articleDetail.is_collected
    }
  },
  watch: {},
  components: {}
}
</script>

<style lang="less" scoped>
.goodAttitude {
  color: orange;
}
</style>
